import  { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components'
import Iconfont from '@/components/Iconfont'
import classnames from 'classnames'
import { connect } from 'react-redux'
const blueLicense = 'https://static3.jekunauto.com/img/others/blue-license.png'
const greenLicense = 'https://static3.jekunauto.com/img/others/green-license.png'
import './style.scss'

interface State{
  carInfo?: ICar | null
  loaded: boolean
}
@connect<any>(({ user }) => ({
  user
}))
export default class CarInfo extends Component<any, State> {
  constructor(props) {
    super(...arguments)
    this.state = {
      loaded: props.loaded
    }
  }

  componentDidMount () {}
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!this.state.loaded) {
      this.setState({
        loaded: true
      })
    }
  }

  carStyleView() {
    // eslint-disable-next-line no-shadow
    const { carInfo, disabled, user } = this.props
    return (
      <View className='carinfo-content-1'>
				{
					carInfo ? (<View key={carInfo.id} onClick={() => {
						if (disabled) return
						Taro.navigateTo({
							url: '/pages/car/list/index'
						})
					}} className={classnames('carinfo-havecar-1', {
						'hide': !carInfo
					})}
					>
						<Image className='carinfo-logo' src={carInfo.brandLogoUrl} mode='aspectFit' />
						<View className='carinfo-context'><View className='text'>{carInfo.seriesName + carInfo.modelName}</View></View>
						<View className='carinfo-license'>
							<View className='carinfo-license-bg'>
								{
									carInfo.isNewEnergy ? (
										<Image className='carinfo-license-green' src={greenLicense} mode='aspectFit' />
									) : (
										<Image className='carinfo-license-blue' src={blueLicense} mode='widthFix' />
									)
								}
							</View>
							<View className='carinfo-license-name'>{carInfo.carLicense}</View>
						</View>
					</View>) : (
						<View onClick={() => {
							if (user.userInfo.accessId) {
								Taro.navigateTo({
									url: '/pages/car/add/index'
								})
							} else {
								console.log('未登录')
							}
						}} className={classnames('carinfo-nohavecar-1', {
							'hide': carInfo
						})}
						>
							<View className='carinfo-icon'><Iconfont size='60' color='#999' name='icon-tianjiacheliang_huabanfuben' /></View>
							<View className='carinfo-context'>请先设置默认车辆信息</View>
							<View className='carinfo-addbtn'>去添加</View>
						</View>
					)
				}

      </View>
    )
  }

  render() {
    const { loaded } = this.state
    return <View className='car'>{ this.carStyleView() }</View>
  }
}
